<script setup>
import { useUserStore } from '@/stores'
import * as echarts from 'echarts'
import { ref, onMounted, onBeforeUnmount } from 'vue'

const {
  user: { name, username, idCard, phone, image, sexs, balance }
} = useUserStore()

const chartRef = ref(null)
let chartInstance = null

const chartOption = {
  title: {
    text: '近6个月消费趋势',
    left: 'center',
    textStyle: {
      color: '#333',
      fontSize: 18
    }
  },
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
    axisLine: { lineStyle: { color: '#667eea' } }
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: '#667eea' } }
  },
  series: [
    {
      name: '消费金额',
      type: 'bar',
      data: [320, 452, 301, 334, 390, 520],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#667eea' },
          { offset: 1, color: '#764ba2' }
        ])
      },
      barWidth: 36,
      borderRadius: [8, 8, 0, 0]
    }
  ],
  grid: { left: 30, right: 30, bottom: 30, top: 60 }
}

const resizeChart = () => {
  chartInstance && chartInstance.resize()
}

onMounted(() => {
  if (chartRef.value) {
    chartInstance = echarts.init(chartRef.value)
    chartInstance.setOption(chartOption)
    window.addEventListener('resize', resizeChart)
  }
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeChart)
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
})
</script>
<template>
  <!-- 用户信息概览卡片 -->
  <div class="home-overview">
    <div class="user-meta">
      <div class="avatar">
        <img v-if="image" :src="image" />
        <img v-else src="@/assets/avatar.png" />
      </div>
      <h4>{{ name }}</h4>
    </div>
    <div class="item">
      <span class="bal">
        <span class="iconfont icon-hy"></span>
        <p>余额: {{ balance }}元</p>
      </span>
    </div>
  </div>

  <!-- 详细信息卡片 -->
  <div class="like-container">
    <div class="home-panel">
      <div class="header">
        <h4>用户信息</h4>
      </div>
      <div class="goods-list">
        <div class="user-info-card">
          <div class="info-item">
            <span class="label">名称</span>
            <span class="value">{{ name }}</span>
          </div>
          <div class="info-item">
            <span class="label">用户名</span>
            <span class="value">{{ username }}</span>
          </div>
          <div class="info-item">
            <span class="label">学号</span>
            <span class="value">{{ idCard }}</span>
          </div>
          <div class="info-item">
            <span class="label">性别</span>
            <span class="value">{{ sexs }}</span>
          </div>
          <div class="info-item">
            <span class="label">余额</span>
            <span class="value">{{ balance }}元</span>
          </div>
          <div class="info-item">
            <span class="label">电话</span>
            <span class="value">{{ phone }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Echarts表格展示 -->
  <div class="echarts-card">
    <div class="echarts-title">消费趋势图</div>
    <div ref="chartRef" class="echarts-container"></div>
  </div>
</template>
<style lang="scss" scoped>
.home-overview {
  height: 132px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 15px;
  margin: 15px;
  display: flex;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

  &::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 60%
    );
    transform: rotate(45deg);
    animation: shine 3s infinite;
  }

  .user-meta {
    flex: 1;
    display: flex;
    align-items: center;

    .avatar {
      width: 85px;
      height: 85px;
      border-radius: 50%;
      margin-left: 60px;
      border: 3px solid rgba(255, 255, 255, 0.3);
      transition: transform 0.3s ease;
      overflow: hidden;

      &:hover {
        transform: scale(1.05);
      }

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
      }
    }

    h4 {
      padding-left: 26px;
      font-size: 20px;
      font-weight: 500;
      color: white;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
  }

  .item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    .bal {
      color: white;
      text-align: center;
      transition: transform 0.3s ease;

      &:hover {
        transform: translateY(-3px);
      }

      .iconfont {
        font-size: 32px;
        margin-bottom: 8px;
      }

      p {
        font-size: 18px;
        line-height: 32px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

.like-container {
  margin: 15px;
  border-radius: 15px;
  background: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.home-panel {
  padding: 20px;

  .header {
    padding: 15px 0;
    border-bottom: 2px solid #f5f5f5;
    margin-bottom: 20px;

    h4 {
      font-size: 22px;
      font-weight: 500;
      color: white;
      position: relative;
      padding-left: 15px;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 20px;
        background: #667eea;
        border-radius: 2px;
      }
    }
  }

  .user-info-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;

    .info-item {
      padding: 15px;
      background: #f8f9fa;
      border-radius: 10px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        background: #fff;
      }

      .label {
        display: block;
        color: #666;
        font-size: 14px;
        margin-bottom: 8px;
      }

      .value {
        display: block;
        color: #333;
        font-size: 16px;
        font-weight: 500;
      }
    }
  }
}

@keyframes shine {
  0% {
    transform: rotate(45deg) translate(-30%, -30%);
  }
  100% {
    transform: rotate(45deg) translate(30%, 30%);
  }
}

// 移动端适配
@media screen and (max-width: 768px) {
  .home-overview {
    height: auto;
    flex-direction: column;
    padding: 20px 0;
    margin: 10px;

    .user-meta {
      justify-content: center;
      margin-bottom: 20px;

      .avatar {
        margin-left: 0;
      }
    }
  }

  .like-container {
    margin: 10px;
  }

  .home-panel {
    padding: 15px;

    .user-info-card {
      grid-template-columns: 1fr;
      gap: 15px;
      padding: 10px;
    }
  }
}

.echarts-card {
  margin: 15px;
  padding: 20px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  .echarts-title {
    font-size: 18px;
    font-weight: 500;
    color: #667eea;
    margin-bottom: 15px;
    padding-left: 8px;
    border-left: 4px solid #667eea;
  }
  .echarts-container {
    width: 100%;
    height: 320px;
  }
}

@media screen and (max-width: 768px) {
  .echarts-card {
    margin: 10px;
    padding: 10px;
    .echarts-container {
      height: 220px;
    }
  }
}
</style>
